<!-- Redux的基本使用 -->
<!-- 核心：state[数据状态]、action[怎么更改数据]、reducer[根据action描述生成新的state] -->

<button id="decrement">-</button>
<span id="count">0</span>
<button id="increment">+</button>

<script src="https://unpkg.com/redux@4.2.0redux/dist/redux.min.js"></script>

<script>
    // 1. 定义reducer函数
    // 作用: 根据不同的action对象，返回不同的新的state
    // state: 管理的数据初始状态
    // action: 对象 type 标记当前想要做什么样的修改
    function reducer(state = {count: 0}, action) {
        // 数据不可变：基于原始状态生成一个新的状态
        if (action.type === 'INCREMENT') {
            return {count: state.count + 1}
        }
        if (action.type === 'DECREMENT') {
            return {count: state.count - 1}
        }
        return state
    }

    // 2. 使用reducer函数生成store实例
    const store = Redux.createStore(reducer)

    // 3. 通过store实例的subscribe订阅数据变化
    // 回调函数可以在每次state发生变化的时候自动执行
    store.subscribe(() => {
        console.log('state变化了', store.getState())
        document.getElementById('count').innerText = store.getState().count
    })

    // 4. 通过store实例的dispatch函数提交action更改状态
    const inBtn = document.getElementById('increment')
    inBtn.addEventListener('click', () => {
        // 增
        store.dispatch({
            type: 'INCREMENT'
        })
    })

    const dBtn = document.getElementById('decrement')
    dBtn.addEventListener('click', () => {
        // 减
        store.dispatch({
            type: 'DECREMENT'
        })
    })

    // 5. 通过store实例的getState方法获取最新状态更新到视图中

</script>